<template>
  <div>
    <el-dialog
      title="选择检查事项"
      :visible="dialogMattersVisible"
      custom-class="custom-dialog"
      @open="initData"
      @close="closeDialog"
    >
      <!-- <div class="table-container"> -->
      <div>
        <!-- <el-form
          ref="queryForm"
          class="query-more-form"
          size="mini"
          label-width="100px"
          :model="queryMatter"
          :rules="rules"
        >
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="名称">
                <el-input
                  v-model="queryMatter.industryName"
                  class="search-ipt"
                  placeholder="请输入行业名称"
                  maxlength="255"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检查事项" prop="">
                <el-input
                  placeholder="请输入检查事项"
                  v-model="queryMatter.belongName"
                  @focus="changePid"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="btn-col">
              <el-button size="mini" class="search-btn" @click="pitchCheck"
                >选择</el-button
              >
            </el-col>
          </el-row>
        </el-form> -->
        <div class="table-list-panel">
          <el-table
            ref="dataTable"
            v-loading="tableMattersLoading"
            border
            size="small"
            :data="caseCodeList"
            height="300px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="45"
              :selectable="row => isClickBtn(row.id, true)"
            />
            <el-table-column
              prop="name"
              label="检查对象"
              show-overflow-tooltip
            />
            <el-table-column width="100">
              <template slot-scope="scope">
                <el-button
                  class="table-inner-btn"
                  :disabled="isClickBtn(scope.row.id)"
                  size="mini"
                  @click="pitch(scope.row)"
                  >选择</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-panel">
          <!-- <Pagination
            :total="queryMatter.total"
            :page.sync="queryMatter.pageNum"
            :limit.sync="queryMatter.pageSize"
            layout="total, sizes, prev, pager, next"
            @pagination="selectMatters"
          /> -->
        </div>
        <!-- 检查主体弹窗 -->
      </div>
    </el-dialog>
    <ThreeTypeDialog
      :dialogVisible="IndustryIdDialogVisible"
      @closeDialog="IndustryIdDialogVisible = false"
      :case_Code="case_Code"
      @threeTypeMsg="threeTypeMsg"
      @flagData="flagData"
    />
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import ThreeTypeDialog from "./threeTypeDialog.vue";
import { getList } from "@/api/system/matters";
import { sourceType, industryArea } from "@/api/case";
export default {
  name: "selectMattersObjectDialog",
  components: {
    Pagination,
    SearchPanel,
    ThreeTypeDialog
  },
  props: {
    dialogMattersVisible: {
      type: Boolean,
      default: false
    },
    selectedMatters: {
      type: Array,
      default: () => []
    },
    caseCodeList: {
      type: Array,
      default: () => []
    },
    pid: {
      type: Number,
      default: 0
    },
    caseCode: {
      type: String,
      default: ""
    },
    inspectObject: {
      type: Object,
      default: {}
    }
  },
  data() {
    let self = this;
    return {
      mattersTableData: [],
      queryMatter: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        industryName: "",
        pid: 0
      },
      flagDatas: "",
      case_Code: "",
      IndustryIdDialogVisible: false,
      tableMattersLoading: false,
      pitchData: [],
      // 监管类型
      superviseArr: [],
      selectDisabled: false,
      rules: {
        pid: [{ required: true, message: "请选择监管类型", trigger: "change" }]
      },
      obj: {},
      arr: [],

      classify_value: null, //分类id
      refreshClassify: 0,
      classifyArr: [], //选项数据源
      //配置项
      classifyProps: {
        label: "name",
        value: "id",
        lazy: true,
        // checkStrictly: true,
        lazyLoad(node, resolve) {
          if (node.data) {
            self.arr.push(node.data);
          }
          const { value, level } = node;
          setTimeout(() => {
            if (node.level == 0) {
              sourceType({
                parentCode: 0,
                typeCode: 2
              }).then(res => {
                if (res.code == 200) {
                  const arrs = res.rows ? res.rows : [];
                  arrs.map(i => {
                    return (i.id = i.code);
                  });
                  resolve(arrs);
                }
              });
            }
            if (node.level > 0) {
              sourceType({ parentCode: value }).then(res => {
                if (res.code == 200) {
                  const arrs = res.rows ? res.rows : [];
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(arrs);
                }
              });
            }
            // if (node.level == 2) {
            //   sourceType({ parentCode: value }).then(res => {
            //     if (res.code == 200) {
            //       const arrs = res.rows ? res.rows : [];
            //       resolve(arrs);
            //     }
            //   });
            // } else if (node.level > 2) {
            //   resolve([]);
            // }
          }, 100);
        }
      }
    };
  },
  methods: {
    isClickBtn(id, isCheckbox = false) {
      if (!this.selectedMatters || this.selectedMatters.length === 0) {
        if (isCheckbox) {
          return 1;
        } else {
          return false;
        }
      }
      let flag = false;
      this.selectedMatters.some(item => {
        if (item.id === id) {
          flag = true;
          return true;
        }
      });
      if (isCheckbox) {
        return flag ? 0 : 1;
      } else {
        return flag;
      }
    },

    handleChange(val) {
      this.queryMatter.topClassifyId = this.classify_value[0];
      this.arr.forEach(item => {
        if (item.id == this.classify_value[this.classify_value.length - 1]) {
          this.mattersTableData.push(item);
        }
      });
    },

    threeTypeMsg(data) {
      this.mattersTableData.push(data);
      this.queryMatter.belongName = data.categoryCompleteName;
    },

    flagData(data) {
      this.flagDatas = data;
    },

    initData() {
      this.queryMatter.pid = this.pid;
      this.getSuperviseList();
      if (this.pid !== null && this.pid !== "") {
        this.selectDisabled = true;
      } else {
        this.mattersTableData = [];
      }
    },
    // 查询检查事项
    selectMatters() {
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.tableMattersLoading = true;
          const query = JSON.parse(JSON.stringify(this.queryMatter));
          getList(query)
            .then(res => {
              this.tableMattersLoading = false;
              this.mattersTableData = res.rows;
              this.queryMatter.total = res.total;
            })
            .catch(() => {
              this.tableMattersLoading = false;
            });
        }
      });
    },
    // 选择表格
    handleSelectionChange(val) {
      this.pitchData = val;
    },
    // 单个选择
    pitch(row) {
      this.classify_value = "";
      this.$emit("addMatters", row, this.queryMatter.pid);
      this.$refs.dataTable.clearSelection();
      this.$emit("closeMattersDialog");
      this.mattersTableData.forEach((item, i) => {
        if (item.id == row.id) this.mattersTableData.splice(i, 1);
      });
      let newObj = {
        categoryCompleteName: row.categoryCompleteName,
        categoryName: row.name,
        categoryId: row.code,
        unitInfoId: this.inspectObject.id,
        unitInfoName: this.inspectObject.unitName,
        unitLegalPerson: this.inspectObject.legalPerson,
        unitInfoCode: this.inspectObject.inifiedCreditCode,
        unitBusinessContacts: this.inspectObject.businessContacts,
        unitBusinessPhone: this.inspectObject.businessPhone,
        unitInfoAddress: this.inspectObject.businessPremises,
        unitInfoAreaCode: this.inspectObject.areaCode
      };
      this.$emit("inspectObj", newObj);
    },
    // 选中的值添加到页面
    pitchCheck() {
      if (!this.pitchData.length) {
        this.$message.warning("请选择检查事项");
      } else {
        this.classify_value = "";
        this.$emit("addMatters", this.pitchData, this.queryMatter.pid);
        this.$emit("closeMattersDialog");
        let arr = [];
        this.pitchData.forEach(item => {
          arr.push(item.id);
        });
        this.mattersTableData.forEach((item, i) => {
          // this.pitchData.forEach((val, j) => {
          //   if (item.id == val.id) this.mattersTableData.splice(i, 1);
          // });
          if (arr.includes(item.id)) this.mattersTableData.splice(i, 1);
        });
      }
    },
    closeDialog() {
      this.$emit("closeMattersDialog");
      // this.$refs["queryForm"].resetFields();
    },
    // 查询监管类型
    getSuperviseList() {
      getList({ level: 2 }).then(res => {
        this.superviseArr = res.rows;
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
